<template>
  <div class="news">
    <header>
      <p>
        <router-link to="/">《——</router-link>
      </p>
      <p>消息</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <van-tabs v-model="activeName">
        <van-tab title="消息">
          <van-swipe-cell v-for="(item, index) in newsList" :key="index">
            <div class="newslist">
              <dl>
                <dt>
                  <img :src="item.img" alt />
                </dt>
                <dd>
                  <p>
                    <span>{{item.name}}</span>
                    <!-- <span>{{item.id}}</span> -->
                  </p>
                  <p>{{item.title}}</p>
                </dd>
                <dd>
                  <p>{{item.time}}</p>
                </dd>
              </dl>
            </div>
            <template #right>
              <van-button square type="danger" text="删除" @click="Del(item.id)" />
              <van-button square type="primary" text="置顶" @click="active(index)" />
            </template>
          </van-swipe-cell>
        </van-tab>
        <van-tab title="公告" name="b">
          <div class="newsgglist">
            <div class="list1">
              <p>
                <span>放假通知</span>
                <span>十月一日放假</span>
              </p>
              <p>2021年09月24日 14:40:40</p>
            </div>
            <div class="list1">
              <p>
                <span>放假通知</span>
                <span>一月一日放假</span>
              </p>
              <p>2021年09月24日 14:40:40</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import axios from "axios";

import { newsList } from "../../../api/index";

export default {
  data() {
    return {
      activeName: "second",
      newsList: []
    };
  },
  created() {
    this.newslist();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //消息渲染
    newslist() {
      newsList().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.newsList = res.data.data;
        }
      });
    },
    //删除数据、
    Del(id) {
      axios({
        url: "/api/newsDel",
        method: "post",
        data: {
          id: id
        }
      }).then(res => {
        //调用函数
        this.newslist();
      });
    },
    //置顶
    active(index) {
      this.newsList.unshift(...this.newsList.splice(index, 1));
    }
  }
};
</script>

<style lang="scss" scoped>
.news {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;

    p:first-child {
      a {
        color: #fff;
      }
    }
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    .van-tabs {
      .van-tabs__wrap {
        .van-tabs__nav {
          .van-tabs__line {
            width: 1px;
            height: 1px;
            background-color: #fff !important;
          }
        }
      }
      .van-swipe-cell {
        margin-top: 10px;
        .newslist {
          dl {
            width: 100%;
            height: 45px;
            border: 1px solid rgb(223, 223, 223);
            display: flex;
            align-items: center;
            dt {
              img {
                width: 40px;
                height: 40px;
                border-radius: 100%;
              }
            }
            dd {
              p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }

      .newsgglist {
        .list1 {
          margin: 10px auto;
          width: 96%;
          height: 60px;
          border: 1px solid #000;
          display: flex;
          justify-content: space-around;
          align-items: center;
          p {
            span {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>